import { RuleObject } from "ant-design-vue/es/form/interface";
import {
  drawerFormState,
  operateType,
  vipLevelColorOptions,
  vipValidMap,
} from "../store";
import { vipStatusMap } from "../dict";
import styles from "../index.module.less";
export default defineComponent({
  setup(props, { attrs, slots, emit, expose }) {
    const help = ref("0-9999" + $t("placeholder80"));
    return () => {
      return (
        <>
          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.baseInfo")}</s-title>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            {(operateType?.value ?? operateType) === "update" ? (
              <a-col span={12}>
                <a-form-item
                  label={$t("table5")}
                  name="level"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                >
                  <i>LV{drawerFormState.level}</i>
                </a-form-item>
              </a-col>
            ) : null}
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span={12}>
              <a-form-item
                name="src"
                label={$t("table25")}
                rules={[
                  {
                    required: true,
                    trigger: ["blur"],
                    message: $t("placeholder184"),
                  },
                ]}
              >
                <upload-avatar v-model={drawerFormState.src} />
              </a-form-item>
            </a-col>
            <a-col span={12}>
              <a-form-item
                name="icon"
                label={$t("table26")}
                rules={[
                  {
                    required: true,
                    trigger: ["blur"],
                    message: $t("placeholder184"),
                  },
                ]}
              >
                <upload-avatar v-model={drawerFormState.icon} />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span={12}>
              <a-form-item
                name="url"
                label={$t("table27")}
                rules={[
                  {
                    required: true,
                    trigger: ["blur"],
                    message: $t("placeholder184"),
                  },
                ]}
              >
                <upload-avatar v-model={drawerFormState.url} />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span="12">
              <a-form-item
                label={$t("table24")}
                name="name"
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder95"),
                  },
                ]}
              >
                <s-input
                  vModel={drawerFormState.name}
                  placeholder={$t("placeholder95")}
                ></s-input>
              </a-form-item>
            </a-col>

            <a-col span="12">
              <a-form-item
                label={$t("table116")}
                name="color"
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder105"),
                  },
                ]}
              >
                <s-select
                  vModel:newValue={drawerFormState.color}
                  placeholder={$t("placeholder105")}
                  options={vipLevelColorOptions}
                  mode="combobox"
                >
                  {{
                    option: ({ value, label, icon }: any) => (
                      <div class={styles.slot_option_style}>
                        <span>{label}</span>
                        <span
                          style={`background: ${value}`}
                          class={styles.Color}
                        ></span>
                      </div>
                    ),
                  }}
                </s-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.ruleSet")}</s-title>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span="12">
              <a-form-item
                label={$t("table117")}
                name="indate"
                rules={[
                  {
                    required: true,
                    message: $t("placeholder107"),
                    trigger: ["change", "blur"],
                  },
                ]}
              >
                <s-radio-group
                  vModel={drawerFormState.indate}
                  options={vipValidMap}
                ></s-radio-group>
              </a-form-item>
            </a-col>
            <a-col span={12}>
              <a-form-item
                label={$t("table118")}
                name="price"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                help={help.value}
                rules={[
                  {
                    required: true,
                    validator: (rule: RuleObject, value: string) => {
                      if (isEmptyType(value)) {
                        help.value = $t("placeholder106");
                        return Promise.reject();
                      }

                      if (+value > 9999) {
                        help.value = "0-9999" + $t("placeholder80");
                        return Promise.reject();
                      }

                      help.value = "0-9999" + $t("placeholder");
                      return Promise.resolve();
                    },
                    trigger: ["change", "blur"],
                  },
                ]}
              >
                <a-row justify="start" align="middle" gutter={10}>
                  <a-col span={16}>
                    <a-input-number
                      min={0}
                      onInput={(value: any) => {
                        value = value?.replace(/^(0+)|[^\d]+/g, "");
                        drawerFormState.price = +value > 9999 ? 9999 : value;
                      }}
                      onBlur={() => {
                        drawerFormState.price =
                          +drawerFormState.price > 9999
                            ? 9999
                            : drawerFormState.price;
                      }}
                      style="width: 100%"
                      vModel:value={drawerFormState.price}
                      placeholder={$t("placeholder106")}
                    />
                  </a-col>
                  <a-col span={8}>
                    <i>{$t("base.unitUSDT")}</i>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.equitySet")}</s-title>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  onChange={({ target: { checked } }: any) => {
                    if (checked === true) {
                      drawerFormState.addFriendNum = +checked;
                    }

                    if (checked === false) {
                      drawerFormState.addFriendNum = undefined;
                    }
                  }}
                  vModel:checked={drawerFormState.addFriendNum}
                >
                  {$t("grade13")}
                </a-checkbox>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8 vertical-align-middle">{$t("grade23")}</i>
                <a-input-number
                  style="width: 50px"
                  size="small"
                  min={0}
                  vModel:value={drawerFormState.addFriendNum}
                />
                <i class="ml8 vertical-align-middle">{$t("grade24")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  onChange={({ target: { checked } }: any) => {
                    if (checked === true) {
                      drawerFormState.addContactNum = +checked;
                    }

                    if (checked === false) {
                      drawerFormState.addContactNum = undefined;
                    }
                  }}
                  vModel:checked={drawerFormState.addContactNum}
                >
                  {$t("grade14")}
                </a-checkbox>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade25")}</i>
                <a-input-number
                  style="width: 50px"
                  size="small"
                  min={0}
                  vModel:value={drawerFormState.addContactNum}
                />
                <i class="ml8 vertical-align-middle">{$t("grade26")}</i>
              </a-col>
            </a-row>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  vModel:checked={drawerFormState.userFilterFlag}
                  disabled
                >
                  {$t("grade15")}
                </a-checkbox>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade27")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox vModel:checked={drawerFormState.privateService}>
                  {$t("grade7")}
                </a-checkbox>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade28")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  onChange={({ target: { checked } }: any) => {
                    if (checked === true) {
                      drawerFormState.redPacketNum = +checked;
                    }

                    if (checked === false) {
                      drawerFormState.redPacketNum = undefined;
                    }
                  }}
                  vModel:checked={drawerFormState.redPacketNum}
                >
                  {$t("grade16")}
                </a-checkbox>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade29")}</i>
                <a-input-number
                  style="width: 50px"
                  size="small"
                  min={0}
                  vModel:value={drawerFormState.redPacketNum}
                />
                <i class="ml8 vertical-align-middle">{$t("grade26")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox
                  onChange={({ target: { checked } }: any) => {
                    if (checked === true) {
                      drawerFormState.giftNum = +checked;
                    }

                    if (checked === false) {
                      drawerFormState.giftNum = undefined;
                    }
                  }}
                  vModel:checked={drawerFormState.giftNum}
                >
                  {$t("grade17")}
                </a-checkbox>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade30")}</i>
                <a-input-number
                  style="width: 50px"
                  size="small"
                  min={0}
                  vModel:value={drawerFormState.giftNum}
                />
                <i class="ml8 vertical-align-middle">{$t("grade26")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox vModel:checked={drawerFormState.whoSeenMeFlag}>
                  {$t("grade18")}
                </a-checkbox>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade31")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox vModel:checked={drawerFormState.offlinePartyFlag}>
                  {$t("grade19")}
                </a-checkbox>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade32")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox vModel:checked={drawerFormState.allPhotoFlag}>
                  {$t("grade20")}
                </a-checkbox>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade33")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox vModel:checked={drawerFormState.privateMedal}>
                  {$t("grade21")}
                </a-checkbox>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade34")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox vModel:checked={drawerFormState.worldChannelVoice}>
                  {$t("grade22")}
                </a-checkbox>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade35")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={4} span={20}>
                <a-checkbox vModel:checked={drawerFormState.chatBubble}>
                  {$t("grade36")}
                </a-checkbox>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row mb8">
              <a-col offset={6} span={18}>
                <i class="mr8  vertical-align-middle">{$t("grade37")}</i>
              </a-col>
            </a-row>
          </a-row>

          <a-row class="s-drawer-extra-row mb8">
            <s-title>{$t("base.seniorSet")}</s-title>
          </a-row>
          <a-row class="s-drawer-extra-row mb8" gutter={16}>
            <a-col span="12">
              <a-form-item
                label={$t("table31")}
                name="status"
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder61"),
                  },
                ]}
              >
                <s-radio-group
                  vModel={drawerFormState.status}
                  options={vipStatusMap}
                ></s-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </>
      );
    };
  },
});
